<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6基础</title>
    <script>
        //  ECMA:标准 ES6:实现 
        //  在ES6中推荐使用let来定义变量，因为使用var来定义变量只有函数作用域(只有在函数的内部才是局部变量，除此之外都是全局变量)
        // {
        //     var a = 12; //表示全局的
        // }
        // alert(a);

        // function test() {
        //     var y = 15;
        // }
        // alert(y);

        //let可以具有块级作用域
        // {
        //     let a = 15;
        // }
        // alert(a);

        //使用let来定义变量，变量名是不能重复的
        // let a = 12;
        // let a = 15; //报错 不能重复
        // console.log(a);

        //可以使用const来定义常量
        // const a = "大前端开发";
        //a = 12; //只能赋值一次
        // console.log(a);

        //ES6中可以使用简单的方式来实现对字符串的连接
        // var k = "xxx";
        // alert("abc"+k+"def");
        // alert(`abc${k}def`); //模板字符串

        //解构赋值
        // var a = 12;
        // var b = 13;
        // var c = 14;
 
        // alert(a,b,c);

        // var [a,b,c] = [12,13,14];
        // console.log(a,b,c); 

        // //可以与json配合使用
        // var {a,b,c} = {a:12,b:13,c:14};
        // console.log(a,b,c); 

        // var [a,[b,c],d] = [12,[13,14],15]
        // console.log(a,b,c,d); 

        //实际的作用可以对数据进行解析
        // var arr = [{title:"test",href:"www.163.com",img:"image1"}];
        // var [{title,href,img}] = arr;
        // console.log(title,href,img);

        //ES6中还提供了一些对数组操作的方法
        // var arr = [1,2,3];
        // var arr2 = [];
        //删除并返回数组中的最后一个元素 pop()
        // arr2.pop();
        // console.log(arr,arr2);  //此时arr和arr2中的元素都被删除了

        //解决的方法：可以使用循环的方式来删除元素(传统方式)
        // for(var i = 0;i<arr.length;i++){
        //     arr2[i] = arr[i];
        // }
        // arr2.pop();
        // console.log(arr,arr2);

        //ES6提供了一个from方法
        // var arr = [1,2,3];
        // var arr2 = Array.from(arr);
        // arr2.pop();
        // console.log(arr,arr2);

        //使用超引用也可以解决以上问题(类似于java中动态可变参数的写法 ...values   Object[])
        // var arr = [1,2,3];
        // var arr2 = [...arr];
        // arr2.pop();
        // console.log(arr,arr2);

        //总结：以上代码对数组进行复制 1. 普通循环    2. Array.from(arr)   3. var arr2 = [...arr];

        //ES6中的for循环
        // var arr = ["fender","yamaha","gibson","jazz"];
        // for(var i in arr) {
        //     console.log(i);
        // }

        //说明：后期可以配合JS中的集合来使用
        // for (var i of arr) {
        //     console.log(i);
        // }

        //ES6中也有Map集合
        // var map = new Map(); //创建一个Map集合
        // map.set("a","apple"); //添加元素
        // map.set("b","banana");
        // console.log( map.get("a")); //从map集合中获取元素

        // map.delete("a"); //根据key删除某个元素

        //使用for.....of来遍历Map集合
        // for(var name of map) {
        //     console.log(name);
        // }

        // //根据key value (常用)
        // for(var [key,value] of map) {
        //     console.log(key,value);
        // }

        // for(var name of map.entries()) {
        //     console.log(name);
        // }

        // for(var [key,value] of map.entries()) {
        //     console.log(key);
        // }

        //ES6中的箭头函数(=>)
        //之前定义函数
        // function show() {           //箭头函数(=>)如何定义  var show=()=>{ alert("1111111111111");}
        //     alert("1111111111111");
        // }

        // function show(a) {        //箭头函数(=>)如何定义  var show=a=>a
        //     return a;
        // }

        // function show(a,b) {     //箭头函数(=>)如何定义  var show=(a,b)=>a+b
        //     return a+b;
        // }

        // function show() {         //var show=()=>"helloworld"
        //     return "helloword"
        // }

        //大家在使用箭头函数需要注意的问题：this的指向问题，如果使用了箭头函数，此时this指向的不是当前对象自身，而是指向的window对象
        //在箭头函数中不要使用最好不要使用this

        // var a = 1000;
        // var json = {
        //     a:100,
        //     b:200,
        //     show:()=>{
        //        alert(this.a); 
        //     }
        // }

        // json.show();

        //ES6中的面向对象 类(class)的概念
        //1. 创建一个Person类
        // class Person{
            //定义一个构造器
            // constructor(name,age) {
            //     this.name = name;
            //     this.age = age;
            // }
            
            //定义构造器的时候参数可以给默认值
            // constructor(name="default",age=0) {
            //     this.name = name;
            //     this.age = age;
            // }

            // constructor(school="neu") {  //A class may only have one constructor ES6中一个类只能有一个构造器
            //     this.school = school;
            // }

        //     showName() {
        //         return this.name;
        //     }

        //     showAge() {
        //         return this.age;
        //     }
        //     showSchool() {
        //         return this.school;
        //     }
        // }

        // class Worker extends Person {

        // }

        // var worker = new Worker("gibson");
        // console.log(worker.showName());

        // var p = new Person("tom",30);
        // // console.log( p.school());
        // console.log( p.showAge());

        //ES6中模块化的概念
        //模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口 import命令用于输入其他模块提供的功能

    </script>
</head>
<body>
</body>
</html>